const path = require('path')

// 导入webpack插件，不需要安装，vue-cli里面已经集成好了
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

// 判断是否为生产环境
const isProd = process.env.NODE_ENV === 'production'
let plugins = []
let cdn = { css: [], js: [] } // cdn资源
let externals = {} // 排除项

if (isProd) {
  plugins = [
    new BundleAnalyzerPlugin({
      analyzerPort: 9999 // 项目体积分析报告运行所在端口地址
    })
  ]
  cdn = {
    css: [
      'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css',
      'https://cdn.staticfile.org/quill/1.3.7/quill.core.min.css',
      'https://cdn.staticfile.org/quill/1.3.7/quill.snow.min.css',
      'https://cdn.staticfile.org/quill/1.3.7/quill.bubble.min.css',
      'https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css'
    ],
    js: [
      'https://cdn.staticfile.org/vue/2.6.11/vue.min.js',
      'https://cdn.staticfile.org/vue-router/3.1.5/vue-router.min.js',
      'https://cdn.staticfile.org/axios/0.19.2/axios.min.js',
      //   'https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js',
      'https://cdn.staticfile.org/echarts/4.6.0/echarts.min.js',
      'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js',
      'https://cdn.staticfile.org/quill/1.3.7/quill.min.js',
      'https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js',
      'https://cdn.staticfile.org/element-ui/2.13.0/index.js',
      'http://mockjs.com/dist/mock.js'
    ]
  }
  externals = {
    // 键 是 包名
    // 值 是 全局引入的cdn资源暴露在window中变量名称，这个一定要注意，确保正确，否则会因为找不到而使得项目无法打包
    vue: 'Vue',
    'element-ui': 'ELEMENT',
    'vue-router': 'VueRouter',
    axios: 'axios',
    lodash: '_',
    echarts: 'echarts',
    nprogress: 'NProgress',
    'vue-quill-editor': 'VueQuillEditor',
    Mock: 'mockjs'
  }
}

module.exports = {
  publicPath: isProd ? './' : '/',
  lintOnSave: false,
  chainWebpack: config => {
    // 配置 webpack-plugin-html 插件中的内容。 args[0] 表示配置信息，增加cdn变量
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args // 需要return
    })
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .test(/.svg$/)
      .include.add(path.resolve(__dirname, './src/icons/svg'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
    const fileRule = config.module.rule('file')
    fileRule.uses.clear()
    fileRule
      .test(/.svg$/)
      .exclude.add(path.resolve(__dirname, './src/icons/svg'))
      .end()
      .use('file-loader')
      .loader('file-loader')
  },
  // configureWebpack  和 chainWebpack 是对webpack的内部配置进行细致的修改！
  configureWebpack: {
    // webpack的插件
    plugins: plugins,
    // webpack的loader
    module: {},
    // webpack 开发/生产  环境下的排除 编译排除项
    externals: externals
  }
}
